<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">form-button</view>
			<view class="tui-page__desc">按钮，支持自定义颜色，支持表单提交</view>
		</view>
		<view class="tui-page__bd  tui-page__spacing">
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold @click="click" text="页面主操作"></tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" disabled loading :size="34" bold @click="click">页面主操作 Loading</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" disabled :size="34" bold disabledBackground="#f3f3f3" disabledColor="#919191">页面主操作 disabled</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#008080" @click="click" :index="1">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#6B8E23" @click="click" :index="2">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#000080" @click="click">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#778899" @click="click">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#008000" @click="click">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#FFD700" @click="click">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#1E90FF" @click="click">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#9400D3" @click="click">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#9400D3" radius="50px" @click="click">圆角按钮</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="#9400D3" radius="0" @click="click">平角按钮</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold background="linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44))" borderColor="transparent" @click="click">页面次要操作</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold plain color="#007AFF" background="#007AFF" @click="click">页面次要操作 空心</tui-form-button>
			<tui-form-button margin="0 0 30rpx 0" :size="34" bold plain link  color="#586c94" @click="click">页面次要操作 link</tui-form-button>
			<view class="tui-btn__box">
				<tui-form-button width="372rpx" height="84rpx" :size="34" bold  open-type="contact" background="#333">打开客服会话</tui-form-button>
			</view>
			<view class="tui-btn__box">
				<tui-form-button width="372rpx" height="84rpx" :size="34" bold  open-type="share" background="#ac9157">触发用户转发</tui-form-button>
			</view>
			<view class="tui-btn__box">
				<tui-form-button width="372rpx" height="84rpx" :size="34" bold  open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber">获取用户手机号</tui-form-button>
			</view>
			<view class="tui-btn__box">
				<tui-form-button width="372rpx" height="84rpx" :size="34" bold  open-type="getUserInfo" background="#07c160">获取用户信息</tui-form-button>
			</view>
			<view class="tui-btn__box">
				<tui-form-button width="372rpx" height="84rpx" :size="34" bold open-type="openSetting" background="#f74d54">打开设置权限页</tui-form-button>
			</view>
			<!-- #ifndef H5 -->
			<view class="tui-btn__box">
				<tui-form-button width="372rpx" height="84rpx" :size="34" bold  open-type="feedback" background="#f8683c">打开意见反馈</tui-form-button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			click(e){
				let index=e.index || ''
				this.tui.toast(`click${index}~`)
			},
			handleGetPhoneNumber(e){
				 console.log(e.detail)
			}
		},
		onShareAppMessage: function(e) {
			return {
				title: 'ThorUI示例'
			};
		}
	}
</script>

<style>
  .tui-btn__box{
	  width: 100%;
	  box-sizing: border-box;
	  padding: 20rpx;
	  display: flex;
	  justify-content: center;
  }
</style>
